<template>
	<view class="page">
		<view class="tab">
			<image class="tab_img" @click="_tab(true)" :src="tab?'https://www.mlito.com/jy/img/tab1_ok.png':'https://www.mlito.com/jy/img/tab1.png'" mode="aspectFill"></image>
			<image class="tab_img" @click="_tab(false)" :src="tab?'https://www.mlito.com/jy/img/tab2_ok.png':'https://www.mlito.com/jy/img/tab2.png'" mode="aspectFill"></image>
		</view>
		
		
		<view class="box1" v-if="tab">
			<view class="box1_rboxt">
				<view class="box1_rboxt_title"><span>森林防火巡查</span><image class="box1_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
				<view class="box1_rboxt_imgbox">
					<image class="box1_rboxt_img" src="https://www.mlito.com/jy/img/list_img.png" mode="widthFix"></image>
					<image class="box1_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
				</view>
				<view class="box1_rboxt_ft">报名时间：09-10 09:00到09-20-09:00</view>
				<view class="box1_rboxt_ft">活动时间：10-10 09:00到10-20-09:00</view>
				<view class="box1_rboxt_ft">需求人数：15人</view>
				<view class="box1_rboxt_ftf"><span>活动地址：嘉州</span><i>完成任务获得：5积分</i></view>
			</view>
			
			<view class="box1_rboxt">
				<view class="box1_rboxt_title"><span>森林防火巡查</span><image class="box1_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
				<view class="box1_rboxt_imgbox">
					<image class="box1_rboxt_img" src="https://www.mlito.com/jy/img/list_img.png" mode="widthFix"></image>
					<image class="box1_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
				</view>
				<view class="box1_rboxt_ft">报名时间：09-10 09:00到09-20-09:00</view>
				<view class="box1_rboxt_ft">活动时间：10-10 09:00到10-20-09:00</view>
				<view class="box1_rboxt_ft">需求人数：15人</view>
				<view class="box1_rboxt_ftf"><span>活动地址：嘉州</span><i>完成任务获得：5积分</i></view>
			</view>
			
			<view class="box1_rboxt">
				<view class="box1_rboxt_title"><span>森林防火巡查</span><image class="box1_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
				<view class="box1_rboxt_imgbox">
					<image class="box1_rboxt_img" src="https://www.mlito.com/jy/img/list_img.png" mode="widthFix"></image>
					<image class="box1_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
				</view>
				<view class="box1_rboxt_ft">报名时间：09-10 09:00到09-20-09:00</view>
				<view class="box1_rboxt_ft">活动时间：10-10 09:00到10-20-09:00</view>
				<view class="box1_rboxt_ft">需求人数：15人</view>
				<view class="box1_rboxt_ftf"><span>活动地址：嘉州</span><i>完成任务获得：5积分</i></view>
			</view>
		</view>
		
		
		<view class="box2" v-else>
			 <uni-calendar
			 class="cal"
			    :insert="true"
			    :lunar="true" 
			    @change="change"
			     />
				 <view class="lists">
					 <view class="lists_l">
					 	<span class="active">上午9点</span>
						<span>上午10点</span>
						<span>上午11点</span>
						<span>上午12点</span>
						<span>下午1点</span>
						<span>下午2点</span>
						<span>下午3点</span>
					 </view>
					 
					 <view class="lists_r">
						 <view class="lists_rbox">
							 <view class="lists_rboxt">
								 <view class="lists_rboxt_title"><span>森林防火巡查</span><image class="lists_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
								 <image class="lists_rboxt_img" src="https://www.mlito.com/jy/img/img.png" mode="widthFix"></image>
								 <view class="lists_rboxt_f">
								 <view class="lists_rboxt_date">完成任务获得：5积分</view>
								 <image class="lists_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
								 </view>
							 </view>
						 </view>
						 
						 <view class="lists_rbox">
						 							 <view class="lists_rboxt">
						 								 <view class="lists_rboxt_title"><span>森林防火巡查</span><image class="lists_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
						 								 <image class="lists_rboxt_img" src="https://www.mlito.com/jy/img/img.png" mode="widthFix"></image>
						 								 <view class="lists_rboxt_f">
						 								 <view class="lists_rboxt_date">完成任务获得：5积分</view>
						 								 <image class="lists_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
						 								 </view>
						 							 </view>
						 </view>
						 
						 <view class="lists_rbox">
						 							 <view class="lists_rboxt">
						 								 <view class="lists_rboxt_title"><span>森林防火巡查</span><image class="lists_rboxt_title_img" src="https://www.mlito.com/jy/img/list_bt.png" mode="heightFix"></image></view>
						 								 <image class="lists_rboxt_img" src="https://www.mlito.com/jy/img/img.png" mode="widthFix"></image>
						 								 <view class="lists_rboxt_f">
						 								 <view class="lists_rboxt_date">完成任务获得：5积分</view>
						 								 <image class="lists_rboxt_add" src="https://www.mlito.com/jy/img/list_add.png" mode="aspectFill"></image>
						 								 </view>
						 							 </view>
						 </view>
						 
						 
					 </view>
					 
					 
				 </view>
			
		</view>
		


		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tab: true
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {},
		onLoad(e) {},
		onShow() {

		},
		methods: {
			_tab(e){
				this.tab = e
			}
		}
	}
</script>
<style scoped lang="scss">
	.lists_rbox{width:510rpx; height: auto; display: flex; margin: 0 10rpx 10rpx; border-bottom: 3rpx solid #f03118;}
	.box1_rboxt_ftf{width: 100%;		display: flex;justify-content: space-between; margin: 0 0 20rpx;}
	.box1_rboxt_ftf i{ width: auto; height:30rpx; display: inline; line-height: 30rpx; border-radius: 100rpx; background: #eb5543; color: #fff; font-size: 19rpx; padding: 0 10rpx; margin: 4rpx 0 0 0;}
	.box1_rboxt_ftf span{ font-size:22rpx;color:#333;}
	
	
	.lists_rboxt_f{width: 100%;		display: flex;justify-content: space-between;}
	.lists_rboxt{width:470rpx; height: auto;  margin: 0 20rpx 25rpx; background: #fff;box-shadow: 0px 0px 12.75px 4.25px rgba(0, 0, 0, 0.08); border-radius: 15rpx; box-sizing: border-box; padding: 15rpx; position: relative;}
	.lists_rboxt_title{ width: auto; height: 35rpx; position: absolute; top:15rpx; left: 15rpx; display: flex;}
	.lists_rboxt_title span{width: auto; height: 35rpx;  background: #fff; padding: 0 20rpx; background: #fff; font-size: 20rpx; color: #333333;}
	.lists_rboxt_title_img{width: auto; height: 35rpx; display: inline-block; }
	.lists_rboxt_img{width: 100%; height: auto; }
	.lists_rboxt_date{ width: auto; height: 25rpx; display: inline; line-height: 25rpx; border-radius: 100rpx; background: #eb5543; color: #fff; font-size: 15rpx; padding: 0 10rpx; margin: 4rpx 0 0 0;}
	.lists_rboxt_add{width: 83rpx; height: 30rpx; display: inline-block; margin: 5rpx 0 0 0; }

	.box1_rboxt{width:617rpx; height: auto;  margin: 0 66.5rpx 35rpx; background: #fff;box-shadow: 0px 0px 12.75px 4.25px rgba(0, 0, 0, 0.08); border-radius: 15rpx; box-sizing: border-box; padding: 17rpx; position: relative;}
	.box1_rboxt_title{ width: auto; height: 45rpx; position: absolute; top:15rpx; left: 15rpx; display: flex; z-index: 1;}
	.box1_rboxt_title span{width: auto; height: 45rpx; line-height: 45rpx;  background: #fff; padding: 0 20rpx; font-size: 26rpx; color: #333333;}
	.box1_rboxt_title_img{width: auto; height: 45rpx; display: inline-block; }
	.box1_rboxt_imgbox{width: 100%; height: auto; position: relative; margin: 0 0 15rpx; }
	.box1_rboxt_img{width: 100%; height: auto;}
	.box1_rboxt_add{width: 106rpx; height: 38rpx; position: absolute; bottom: 18rpx; right: 18rpx;}
	
	.box1_rboxt_ft{ width: 100%; height: auto; font-size:22rpx;color:#333;margin:0 0 10rpx}
	
	.lists{ width:675rpx; height: auto; display: flex; margin: 10rpx 37.5rpx 30rpx;}
	.lists_l{ width:145rpx; height: auto;}
	.lists_l span{ width: 100%; height: 85rpx; line-height: 85rpx; font-size: 30rpx; color: #333333;}
	.lists_l span.active{ color: #f03118;}
	.lists_r{ width:530rpx; height: auto; }
	.cal{ width: 750rpx; height: auto; display: block; margin: 0rpx 0; border-radius: 50rpx; background: #fff; padding: 20rpx 0 20rpx; box-sizing:content-box; transform: scale(.9);overflow: hidden; box-shadow: 0px 0px 12.75px 4.25px rgba(0, 0, 0, 0.08);}
	.page {
		width: 100vw;
		min-height: 100vh;
		background: url(https://dcdn.it120.cc/haitangweiguang/login_bj.png) no-repeat;
		background-size: 100%;
		background-color: #fff;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
	}

	.tab {
		width: 663rpx;
		height: 119rpx;
		margin: 30rpx 0 0 43rpx;
	}
	
	.tab_img{
		width: 331.5rpx;
		height: 119rpx;
	}
</style>